<template>
	<view class="contain login"  style="padding-top:160rpx">
		<view class=" flex fixed-top h-44 box-c"  :style="{'padding-top': top + 'px'}">
			<view @click="back(1)"  class="flex f-s-0 padding-lr10 f-a-c f-j-c van-icon van-icon-arrow-left f20-size"></view>
		</view>
			<swiper style="width:100wh;height:100vh" :disable-touch="true" :current="active" @change="changeSwiper" :indicator-dots="false" :autoplay="false" :interval="1000" :duration="500">
				<swiper-item catchtouchmove='onTouchMove' class="padding-lr30 box-b ">

					<!-- <view @click="goBack()" class="flex f-j-e margin-b16 t-color-y">{{i18n['跳过']}}</view> -->
					<view class="flex f-a-c f-j-c f16-size">更换绑定的手机号码</view>
					<view class="f13-size t-color-9 margin-t20">您当前绑定手机号码,请输入新的绑定手机号。</view>

					<view class="flex h-50 b-radius-30 bg-color-f1 margin-t20">
						<view class="flex  f-a-c f-j-c f-s-0 icon-item f-w-b">+86</view>
						<view class="flex flex-1 padding-lr12">
							<button v-if="showPhone" class="flex f-a-c f16-size f-j-s t-color-8" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">{{getphonetext}}</button>
							<input v-else class="f16-size" v-model="phone" type="number" maxlength="11" placeholder="请输入手机号">
						</view>
					</view>
					<view class="h-40 margin-t30 flex f-a-c f-j-c bg-color-linear-y t-color-w f16-size b-radius-30"  @click="next()">{{i18n['下一步']}}</view>
				</swiper-item>
				<swiper-item catchtouchmove='onTouchMove' class="padding-lr30 box-b">
					<view class="padding-6"></view>
					<view class="flex f-a-c f-j-c f16-size">更换绑定的手机号码</view>
					<view class="f13-size f-w t-color-9 margin-t20">
						{{i18n['我们向您的手机发送了一条验证短信'] | i18n('+86 '+phone)}}
					</view>
					<view class="flex h-50 b-radius-30 bg-color-f1 margin-t20">
						<view class="flex  f-a-c f-j-c f-s-0 icon-item f-w-b">+86</view>
						<view class="flex flex-1 padding-lr12">
							<button v-if="showPhone" class="flex f-a-c f16-size f-j-s t-color-8" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">{{getphonetext}}</button>
							<input v-else class="f16-size" v-model="phone" type="number" maxlength="11" placeholder="请输入手机号">
						</view>
					</view>
					<view class="flex h-50 b-radius-30 bg-color-f1 margin-t20 over-h">
						<view class="flex  f-a-c f-j-c f-s-0 icon-item f-w-b">
							<image class="w-20" src="../../static/images/login_code.png" mode="widthFix"></image>
						</view>
						<view class="flex flex-1 padding-lr12">
							<input class="f16-size" v-model="code" type="number"  :placeholder="i18n['请输入图形验证码']">
						</view>
						<view class="flex f-a-c f-s-0">
							<img-code ref="imgCode" @imgSuc="getImgCode" class="flex  h-30"></img-code>
						</view>
					</view>
					<view class="flex h-50 b-radius-30 bg-color-f1 margin-t8">
						<view class="flex  f-a-c f-j-c f-s-0 icon-item f-w-b">
							<image class="w-20" src="../../static/images/login_code.png" mode="widthFix"></image>
						</view>
						<view class="flex flex-1 padding-lr12">
							<input class="f16-size" v-model="sms" type="tel"  :placeholder="i18n['请输入手机验证码']">
						</view>
						<view class="padding-6">
							<phone-code ref="phonecode" :codeImg="codeImg" :code="code" :phone="phone"  :sendType="2"  ></phone-code>
						</view>
					</view>
					<view class="h-40 margin-t30 flex f-a-c f-j-c bg-color-linear-y t-color-w f16-size b-radius-30"  @click="bindPhone()">{{i18n['下一步']}}</view>
					<view class="h-40 margin-t12 flex f-a-c f-j-c b-color-y t-color-y f16-size b-radius-30"  @click="active=0">{{i18n['返回']}}</view>
				</swiper-item>

			</swiper>
	</view>
</template>
<style scoped>
@import url('../../static/css/page/white.css');
	@import url('@/static/css/passport/login.css');
</style>
<script>
	import imgCode from '@/components/common/imgcode.vue';
	import imgCodeTwo from '@/components/common/imgcode.vue';
	import phoneCode from '@/components/common/phonecode.vue';
	import phoneCodeTwo from '@/components/common/phonecode.vue';
	const $ = require('@/utils/api.js');
	const api = require('@/utils/validate.js');
	let codeTimeOut;
	export default {
		computed: {  
		    getphonetext() {  
		      // 根据依赖的数据计算出一个新的属性值  
		       return this.phone == '' ? '请输入手机号' : this.phone 
		    },  
		  },  
		data() {
			return {
				phone: '',
				sms: '',
				code: '',
				codeImg:{},

				sms2: '',
				code2: '',
				codeImg2:{},

				type: '1',
				isFlag: false,
				showPhone: false,
				user: '',
				confirmPassword: '',
				password: '',
				logo: '',
				active: 0,
				link: '',
			};
		},
		onLoad: function(options) {
			this.link = options.url ? options.url : '';

			this.authKey = options.authKey ? options.authKey : '';



			this.user = uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo') : '';
			this.init();
		},
		methods: {
			onTouchMove() {
				return false;
			},
			getImgCode(res) {
				this.codeImg = res;
			},
			getImgCode2(info) {
				this.codeImg2 = info;
			},
			changeSwiper(e) {
				this.active = e.detail.current;
			},
			getPhoneNumber(e) {
				const self = this;
				$.ajax({
					url: 'common/xcx/getPhone',
					data: {
						encryptedData: e.detail.encryptedData,
						sessionKey: uni.getStorageSync('session_key'),
						iv: e.detail.iv
					},
					method: 'GET',
					success(res) {
						self.phone = res.data;

						// self.loginBtn();
					}
				})

			},
			next() {
				if(this.active == 0) {
					if(this.phone == ''){
						$.$toast('请输入手机号码');return;
					}
					if(this.showPhone){
						// this.sms = '240101';
						this.bindPhone();
					}else{
						this.active = 1;
					}
					return;
				}
				if(this.active == 1) {
					this.active = 2;
				}
			},
			bindPhone() {
				const self = this;
				let check = api.validate([
					{
						value: this.phone,
						text: '',
						rules: 'phone'
					},
					{
						value: this.sms,
						text: this.i18n['请输入验证码'],
						rules: ''
					},
				]);
				if (!check) {
					return
				};

				$.ajax({
					url: 'member/changePhone',
					data: {
						phone: this.phone,
						code: this.sms,
						authKey:this.authKey
					},
					method: 'POST',
					success(res) {
						setTimeout(() => {
							self.goBack();
						},2000)
						$.$toast(self.i18n('操作成功'));
					}
				})

			},

			goBack() {
				const self = this;
				if(self.link != '') {
					self.go(self.link, 2);
				}else {
					self.go('/pages/home/index', 3);
				}
			},
			init() {
				// #ifdef MP-WEIXIN
				this.showPhone = true;
				// #endif
			},
		},
		computed: {
			i18n() {
				return this.$t('login')
			},
		},
		created() {
		},
		mounted() {},
		destroyed() {},
		components: {phoneCode,imgCode,imgCodeTwo,phoneCodeTwo},
		onPullDownRefresh() {
		},
		onReachBottom() {
		}
	}
</script>
<style scoped>
	.wrap-swiper {
		height: 100%;
	}
	button {
		width: 100%;
		height: 100%;
		margin: 0;
	}
	button::after {
		border: none;
	}
</style>
